<template>
  <div class="index" ref="index">
    <div v-show="loadShow" class="load">{{ loadNum + '%' }}</div>
    <div v-show="textShow" class="text">向上滑动屏幕观看故事</div>
  </div>
</template>

<script>
import * as tpl from '@/config/tpl'
import * as list from '@/config/data'
import * as PIXI from 'pixi.js'
import AlloyTouch from 'alloytouch'
import { TimelineMax, TweenMax } from 'gsap'
export default {
  name: 'Index',
  data () {
    return {
      loadNum: 0,
      loadShow: true,
      textShow: false,
      app: null,
      loader: null,
      sprite: null,
      resources: null,
      maxLong: null,
      progress: null,
      containerSeances: null,
      alloyTouch: null,
      allTimeLinde: null
    }
  },
  methods: {
    // 初始化舞台
    init () {
      const _width = document.getElementsByTagName('html')[0].getBoundingClientRect().width
      this.app = new PIXI.Application({
        width: 750,
        height: 1448,
        // transparent: true,
        resolution: _width / 750
      })
      this.loader = new PIXI.Loader()
      this.sprite = PIXI.Sprite
      this.loaderTexture()
      this.$refs.index.appendChild(this.app.view)

      //  初始化时间轴
      this.allTimeLinde = new TimelineMax({ repeat: 1, paused: true })
    },
    // 添加图片到纹理
    loaderTexture () {
      this.loader.add(tpl.p1Arr, tpl.p2Arr, tpl.p2Arr2, tpl.p3Arr, tpl.p4Arr, tpl.p5Arr)
        .load((loader, resources) => {
          this.resources = resources
          this.spriteContainer()
        })
        .onLoad.add((loader) => {
          this.loadNum = Math.round(loader.progress)
        })
    },
    // 创建精灵组
    spriteContainer () {
      setTimeout(() => {
        this.loadShow = false
        this.textShow = true
      }, 500)
      const containerBg = new PIXI.Container()
      containerBg.name = 'containerBg'
      containerBg.position.set(0, 0)

      this.containerSeances = new PIXI.Container()
      this.containerSeances.name = 'containerSeances'
      this.containerSeances.position.set(0, 0)

      const seances1 = new PIXI.Container()
      seances1.name = 'seances1'
      seances1.position.set(1780, 620)
      seances1.pivot.set(1780, 620)

      const seances2 = new PIXI.Container()
      seances2.name = 'seances2'
      seances2.position.set(1773, 0)
      seances2.alpha = 0
      const seances3 = new PIXI.Container()
      seances3.name = 'seances3'
      seances3.position.set(4960, 0)

      const seances4 = new PIXI.Container()
      seances4.name = 'seances4'
      seances4.position.set(7902, 0)

      this.containerSeances.addChild(seances1, seances2, seances3, seances4)

      const containerLast = new PIXI.Container()
      containerLast.name = 'containerLast'
      containerLast.position.set(-203, 0)

      this.app.stage.addChild(containerBg, this.containerSeances, containerLast)

      for (const k of Object.keys(list)) {
        for (const i of Object.keys(list[k])) {
          const tem = list[k][i]
          this.addSpr(tem.img, tem.x, tem.y, tem.alpha, tem.sprName, tem.sprGroup)
        }
      }
      this.initTouch()
      this.tweenAction()
    },

    // 初始化移动
    initTouch () {
      //  初始化alloyTouch移动
      this.maxLong = -(10800 - 750)
      this.alloyTouch = new AlloyTouch({
        touch: 'body', // 反馈触摸的dom
        vertical: true, // 不必需，默认是true代表监听竖直方向touch
        maxSpeed: 0.8, // 不必需，触摸反馈的最大速度限制
        property: 'translateX', // 被运动的属性
        min: this.maxLong, // 不必需,运动属性的最小值
        max: 0, // 不必需,滚动属性的最大值
        bindSelf: false, // 是否绑定自身
        value: 0,
        change: (value) => {
          if (value <= 0 && value >= this.maxLong) {
            this.progress = value / this.maxLong
            this.allTimeLinde.seek(value / this.maxLong)
            this.animationPlay()
            this.textShow = false
          }
        }
      })
    },

    // 加载精灵到精灵组内
    addSpr (img, x, y, alpha, sprName, sprGroup) {
      const spr = this.sprite.from(img)
      spr.position.set(x, y)
      spr.name = sprName
      spr.alpha = alpha

      const sprArr = sprGroup.split('/')
      let sprites = this.app.stage.getChildByName(sprArr[0])

      if (sprArr.length > 1) {
        for (let i = 1; i < sprArr.length; i++) {
          const temp = sprArr[i]
          sprites = sprites.getChildByName(temp)
        }
      }
      sprites.addChild(spr)
    },

    // 时间轴
    tweenAction () {
      // 大背景移动
      const seance = this.app.stage.getChildByName('containerSeances')
      const seanceTimeLine = new TimelineMax({ delay: 0 })
      const seanceTween = TweenMax.to(seance.position, 1, { x: this.maxLong })
      seanceTimeLine.add(seanceTween, 0)
      this.allTimeLinde.add(seanceTimeLine, 0)

      // 星星变亮
      const star = this.app.stage.getChildByName('containerSeances').getChildByName('seances1').getChildByName('p1Star')
      const starTimeLine = new TimelineMax({ delay: -25 / this.maxLong })
      const starTween = TweenMax.to(star, -12 / this.maxLong, { alpha: 1 })
      starTimeLine.add(starTween, 0)
      this.allTimeLinde.add(starTimeLine, 0)

      // 房子
      const house = this.app.stage.getChildByName('containerSeances').getChildByName('seances1')
      const houseTimeLine = new TimelineMax({ delay: -600 / this.maxLong })
      const houseTween = TweenMax.to(house.scale, -200 / this.maxLong, { x: 3, y: 3 })
      const houseTween2 = TweenMax.to(house, -200 / this.maxLong, { alpha: 0 })
      houseTimeLine.add(houseTween)
      houseTimeLine.add(houseTween2)
      this.allTimeLinde.add(houseTimeLine, 0)

      // 场景二
      const sean2 = this.app.stage.getChildByName('containerSeances').getChildByName('seances2')
      const sean2TimeLine = new TimelineMax({ delay: -680 / this.maxLong })
      const sean2Tween = TweenMax.to(sean2, -100 / this.maxLong, { alpha: 1 })
      houseTimeLine.add(sean2Tween)
      this.allTimeLinde.add(sean2TimeLine, 0)

      // 音符
      const musics = this.app.stage.getChildByName('containerSeances').getChildByName('seances2').getChildByName('p2Yinfu')
      const musicTimeLine = new TimelineMax({ delay: -2500 / this.maxLong })
      const musicTween = TweenMax.to(musics, -200 / this.maxLong, { x: 3400, y: 300, alpha: 0 })
      musicTimeLine.add(musicTween)
      this.allTimeLinde.add(musicTimeLine, 0)

      // 黑夜窗户缩小
      const casement = this.app.stage.getChildByName('containerSeances').getChildByName('seances3').getChildByName('p32')
      const casementTimeLine = new TimelineMax({ delay: -2580 / this.maxLong })
      const casementTween = TweenMax.from(casement.position, -300 / this.maxLong, { x: 0, y: -20 })
      const casementTween2 = TweenMax.from(casement.scale, -300 / this.maxLong, { x: 5, y: 5 })
      musicTimeLine.add(casementTween)
      musicTimeLine.add(casementTween2)
      this.allTimeLinde.add(casementTimeLine, 0)

      // 工作中的小男孩
      const working = this.app.stage.getChildByName('containerSeances').getChildByName('seances3').getChildByName('p31')
      const workingTimeLine = new TimelineMax({ delay: -2780 / this.maxLong })
      const workingTween = TweenMax.to(working, -600 / this.maxLong, { alpha: 1 })
      workingTimeLine.add(workingTween)
      this.allTimeLinde.add(workingTimeLine, 0)

      // 旋涡显示
      const xn = this.app.stage.getChildByName('containerLast').getChildByName('bgLast')
      const xnTimeLine = new TimelineMax({ delay: -6700 / this.maxLong })
      const xnTween = TweenMax.to(xn, -50 / this.maxLong, { alpha: 1 })
      xnTimeLine.add(xnTween)
      this.allTimeLinde.add(xnTimeLine, 0)
    },

    // 序列帧动画
    animationPlay () {
      // 小孩学走路
      const childStartTime = -1000 / this.maxLong
      const childDuringTime = -1100 / this.maxLong
      if (this.progress >= childDuringTime) {
        const childIndex = Math.floor((this.progress - childStartTime) / childDuringTime * tpl.p2Arr2.length)
        if (childIndex < tpl.p2Arr2.length && childIndex >= 0) {
          this.app.stage.getChildByName('containerSeances').getChildByName('seances2').getChildByName('p2Child').texture = PIXI.Texture.from(tpl.p2Arr2[childIndex])
        }
      }

      // 文案
      const xunStartTime = -6700 / this.maxLong
      const xunDuringTime = -1500 / this.maxLong
      if (this.progress >= xunDuringTime) {
        const xunIndex = Math.floor((this.progress - xunStartTime) / childDuringTime * tpl.p5Arr.length)
        if (xunIndex < tpl.p5Arr.length && xunIndex >= 0) {
          this.app.stage.getChildByName('containerLast').getChildByName('bgLast').texture = PIXI.Texture.from(tpl.p5Arr[xunIndex])
        }
      }
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.index {
  position: relative;
  width: 100%;
  min-height: 100vh;
  .load {
    position: absolute;
    top: 40%;
    width: 100%;
    color: #fff;
    text-align: center;
    font-size: 2em;
    font-weight: bolder;
  }
  .text {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 1.5em;
    color: #fff;
    text-align: center;
    font-size: 1.5em;
    font-weight: bolder;
    animation: textMove 1s infinite linear;
  }
}
canvas {
  position: relative;
  height: 100%;
}
@keyframes textMove {
  0% {
    top: 30%;
  }
  50%{
    top: 31%
  }
  100% {
    top: 30%;
  }
}
</style>
